import React from 'react';
import {Image} from 'react-native';
import {Box, Button, Text, Center,Progress} from 'native-base';
import Star from '../public/icons/star.js';
const Ticket = props => {
  let list = [];
  for (let i = 0; i < props.starNum; i++) {
    list.push(<Star key={i}></Star>);
  }
  return (
    <Box
      style={{
        height: 100,
        borderRadius: 10,
        display: 'flex',
        padding: 10,
        backgroundColor: '#fff',
        marginTop: 10,
        flexDirection: 'row',
      }}>
      <Image
        source={require('../public/img/8fh98ziv.jpg')}
        style={{width: 80, height: 80}}></Image>
      <Box flex={2} style={{paddingLeft:10,marginTop:5}}>
        <Box style={{display: 'flex', justifyContent: 'flex-start',flexDirection:'row'}}>
          <Text fontSize={18} style={{fontWeight:'bold'}}>{props.name}</Text>
        </Box>
        <Box style={{ display:'flex',justifyContent:'flex-start',flexDirection:'row'}}>
          <Text>难度：</Text>
          {list}
        </Box>
        <Box style={{ display:'flex',justifyContent:'flex-start',flexDirection:'row'}}>
          <Text>熟练度：</Text>
          <Progress value={props.skill} width="50%" style={{marginTop:8}} colorScheme='orange'></Progress>
        </Box>
      </Box>
      <Center flex={1}>
        <Button colorScheme="red" onPress={()=>{props.navigateTo('Record',{name:props.name})}}>
          开始
        </Button>
      </Center>
    </Box>
  );
};

const TrainSelector = (props) => {
  const list = [
    {
      name: '正手拉',
      starNum: 2,
      src: '../public/img/8fh98ziv.jpg',
      skill:20
    },
    {
      name: '反手冲',
      starNum: 4,
      src: '../public/img/8fh98ziv.jpg',
      skill:90
    },
  ];
  //method
  //获取资料

  //render
  return (
    <Box
      style={{
        backgroundColor: '#f3f3f3',
        flex: 1,
        paddingLeft: 10,
        paddingRight: 10,
      }}>
      {list.map((item, index) => {
        return <Ticket key={index} {...item} navigateTo={props.navigation.navigate}></Ticket>;
      })}
    </Box>
  );
};
export default TrainSelector;
